<template>
     <div>
<div class="row">
    <div class="item"></div>
        <a><div class="item1">语文</div></a >
        <a><div class="item1">数学</div></a >
        <a><div class="item1">英语</div></a >
        <a><div class="item1">科学</div></a >
        <div class="item"></div>
    </div>
</div>
</template>
<script>


export default ({
    data() {
        return{
            mytodo:'',
            arr:['语文','数学','英语','科学']
        };
    },
})
</script>

<style scoped>
.row{
position: fixed;
 display: flex;
 flex-direction: row;
 width: 100%;
 height:75px;
 background:black;
 display: flex;
 justify-content:center;
 align-items:center;
}

a:hover{
     background:#ff44ff;
}

.item{
 height: 75px;
 width: 75px;
 flex-grow:2;
 border:1px solid rgb(0, 0, 0);
}

.item1{
 height: 75px;
 width: 75px;
 flex-grow:1;
 border:1px solid #000;
 color:#ffffff;
 text-align:center;
 line-height:75px;
}
</style>